<template>
	<div class="x-wrap">
		<div class="x-header">
			<div class="x-title"><span class="title-text">用户管理</span></div>
		</div>
		<div class="x-panel">
			<div class="x-toolbar">
				<div class="fl">
					<a-button type="primary">新建</a-button>
					<a-button>编辑</a-button>
					<a-button type="danger">删除</a-button>
				</div>
				<div class="fr x-query">
					<a-form layout="inline">
						<a-input-search placeholder="请输入要查询的关键词" />
						<a-button>高级查询</a-button>
					</a-form>
				</div>
			</div>
			<div class="x-fixed">
				<ui-table :data="data" :columns="columns" />
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { Form, Input, Button } from 'ant-design-vue'
	import Table from '@/components/Grid'

	Vue.use(Form);
	Vue.use(Input);
	Vue.use(Button);
	Vue.use(Table);

	export default {
		name: 'User',
		// components: {
		// 	Table
		// },
		data() {
			return {
				columns: [{
					title: '姓名',
					dataIndex: 'name',
					key: 'name',
				}, {
					title: '年龄',
					dataIndex: 'age',
					key: 'age',
				}, {
					title: '住址',
					dataIndex: 'address',
					key: 'address',
				}],
				data: [{
					key: '1',
					name: '胡彦斌',
					age: 32,
					address: '西湖区湖底公园1号'
				}, {
					key: '2',
					name: '胡彦祖',
					age: 42,
					address: '西湖区湖底公园1号'
				}]
			}
		}
	}
</script>